<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>理工表白墙</title>
<link rel="stylesheet" type="text/css" href="../css/biaobai.css">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	more(0,10000000,10);
$("#all").click(function() {
	$("#content").empty();
	$(".selector").val("1");
	more(0, 10000000, 10);
});
$("#biaobai").click(function() {
	$("#content").empty();
	$(".selector").val("1");
	more(1, 10000000, 10);
});
$("#dream").click(function() {
	$("#content").empty();
	$(".selector").val("2");
	more(2, 10000000, 10);
});
$("#tucao").click(function() {
	$("#content").empty();
	$(".selector").val("3");
	more(3, 10000000, 10);
});
$("#more").click(function() {
	var last=$(".messageId:last").text();
	if($("#more").text()!="没有更多了"){
		more(0,last, 10);
	}
});
$("#glyphicon").click(function() {
	alert("xx");
	
});
$("#add").click(function() {
	if($("#nikeName").val()==""){
		alert("请输入昵称！")
		return ;
	}
	if($("#message").val()==""){
		alert("请输入想说的话！")
		return ;
	}else{
		
	addmessage();
	}
});
function addmessage() {
	$.ajax({
		type : "post",
		async : false, 
		url : "../servlet/addBiaobaiServlet",
		data : {
			nikeName : $("#nikeName").val(),
			content : $("#message").val(),
			type : $("#type").val()
		},
		timeout:25000,
		dataType : "text",
		success : function(result) {
			if(result=="success"){
				$("#content").empty();
				$(".selector").val($("#type").val());
				more($("#type").val(), 0, 10);
			}
		}
	});
}
function zan() {
	$.ajax({
		type : "post",
		url : "../servlet/addBiaobaiServlet",
		data : {
			nikeName : $("#nikeName").val(),
			content : $("#message").val(),
			type : $("#type").val()
		},
		timeout:25000,
		dataType : "text",
		success : function(result) {
			alert("xxx");
			if(result=="success"){
				$("#content").empty();
				$(".selector").val($("#type").val());
				more($("#type").val(), 0, 10);
			}
		}
	});
}
function more(type, start, length) {
	$.ajax({
		type : "post",
		url : "../servlet/getBiaobaiServlet",
		data : {
			type : type,
			start : start,
			length : length
		},
		timeout:25000,
		dataType : "json",
		success : function(result) {
			var item = '';
			if(result.length<10){
				$("#more").html("没有更多了");
			}else{
				$("#more").html("加载更多");
			}
			$.each(result, function(i, data){ 
				item +='<div  style="background-image: url(../images/bg.jpg);margin-top: 20px;">'+'<div style="display: none;" class="messageId">'+data.id+'</div>'+
							'<div>'+
								'<h4 style="color: #ffffff;">'+data.nikeName+':</h4>'+
							'</div>'+
							'<div style="color: #ffffff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+data.content+'</div>'+
							'<div style="float: left;" ><a><span class="glyphicon glyphicon-thumbs-up"></span></a> '+data.zan+'</div>'+
							'<div style="float: right;">'+data.addtime+'</div>'+
						'</div>';
				　}); 
			$("#content").append(item);
		}
	});
}
});
</script>
</head>
<body
	style="background-image: url(../images/bg.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;">
	<div class="container">
		<div class="page-header text-center" style="color: #ffffff">
			<h1>理工表白墙</h1>
		</div>
		<div class="btn-group btn-group-justified">
			<div class="btn-group">
				<button type="button" class="btn btn-danger" id="all">全部</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-danger" id="biaobai">表白</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-danger" id="dream">心愿</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-danger" id="tucao">小道消息</button>
			</div>
		</div>
		<form role="form" style="margin-top: 10px;">
			<div class="form-group">
				<textarea class="form-control" rows="3" id="message"></textarea>
			</div>

			<div class="form-group">
				<div>
					<select class="form-control selector" style="width: 90px; float: left;" id="type">
						<option selected="selected" value="1">表白</option>
						<option value="2">心愿</option>
						<option value="3">消息</option>
					</select>
				</div>

				<div class="form-group" style="width: 70px; float: left; margin-left: 10px;" id="namediv">
					<input type="text" class="form-control" id="nikeName" placeholder="昵称">
				</div>
				<div style="width: 70px; float: left; margin-left: 10px;">
					<button id="add" class="btn btn-danger">提交</button>
				</div>
			</div>

		</form>

	</div>
	<div class="container" id="content">
		
	</div>

	<div class="container">
		<button type="button" class="btn btn-danger btn-block" id="more">加载更多</button>
	</div>
	<div class="container text-center" style="margin-top: 10px;">
		<img alt="微信" src="../images/weixin.jpg">
	</div>
	<div style="width: 100%;height:40px;; background-color: #8A091B; margin-top: 10px;">
		<div class="text-center" style="color: #ffffff; margin-top: 10px;">
			<h5>三江潮出品</h5>
			<h5>Copyright © WAVE 2015</h5>
		</div>
		
	</div>

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
